import { Link } from "react-router-dom"
import React, { FC } from 'react'
import { baseURL } from "../api/request"
import { Ellipsis } from "antd-mobile"
import { ClockCircleOutline, HeartOutline, MessageOutline } from "antd-mobile-icons"
import { useCommonFunc } from '../hooks/useCommon'

const MyNews: FC<{
  list?: any
}> = ({
  list
}) => {
    const { dateFormat } = useCommonFunc()

    return(
      <ul style={{ height: 800, overflow: 'auto', paddingBottom:230}}>
        {
          list.map((item: any, index: any) => {
            return (
              <li key={index} style={{ marginTop: 10 }}>
                <Link to={'/new-detail/' + item.id} style={{ display: 'flex' }} >
                  <img src={baseURL + item.cover} style={{ width: 100, height: 100, borderRadius: 5, marginRight: 10 }} alt="" />
                  <div className="rightbox" style={{ flex: 1, flexShrink: 0 }} >
                    <div className="title " style={{ fontSize: 16, color: '#000' }} >
                      <Ellipsis direction='end' content={item.title} />
                    </div>
                    <div style={{ fontSize: 12, color: '#666', marginTop: 4 }} className="content ellipsis-2" dangerouslySetInnerHTML={{
                      __html: item.content
                    }}  >
                      {/* <Ellipsis direction='end' rows={2} content={item.content} /> */}
                    </div>
                    <div style={{ marginTop: 4, color: "#999", fontSize: 13, display: 'flex', alignItems: 'center' }}>
                      <ClockCircleOutline style={{ fontSize: 13 }} />
                      <span> {dateFormat(item.updateTime)}</span>
                    </div>
                    <div className="other" style={{ marginTop: 4, color: "#999", fontSize: 13, display: 'flex', justifyContent: 'space-between' }}>
                      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <HeartOutline style={{ fontSize: 13 }} />
                        <span> {item.likeNum}</span>
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <MessageOutline style={{ fontSize: 13 }} />
                        <span> {item.commentNum}</span>
                      </div>
                    </div>
                  </div>
                </Link>
              </li>
            )
          })
        }
      </ul>
    )
  }

export default MyNews